<template>
  <div>
    <zcb-dialog
      v-model="visible"
      :title="textareaModelObj.title || t('keys.approval')"
      :width="450"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="dialogAll" v-if="visible">
        <div class="copywriting" v-html="textareaModelObj.copywriting"></div>
        <el-form ref="refForm" :model="formData" :label-width="textareaModelObj.labelWidth" label-position="left">
          <el-row>
            <el-col>
              <el-form-item
                :label="textareaModelObj.label || t('keys.content')"
                prop="description"
                :rules="[
                  { required: descriptionFalg, message: `${t('keys.pleaseEnter')}${textareaModelObj.label || t('keys.content')}`, trigger: 'blur' }
                ]"
              >
                <el-input
                  type="textarea"
                  v-model="formData.description"
                  :autosize="{ minRows: 5, maxRows: 6 }"
                  resize="none"
                  clearable
                  :placeholder="t('keys.pleaseEnter')"
                  maxlength="200"
                  show-word-limit
                  @blur="
                    (v) => {
                      formData.description = isTrim(v.currentTarget.value, '', 'TEXTAREA')
                    }
                  "
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <template #btns>
        <el-button @click="closeModel()">{{ t('keys.cancel') }}</el-button>
        <el-button type="primary" @click="submitForm">{{ t('keys.ok') }}</el-button>
      </template>
    </zcb-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useI18n } from 'vue-i18n'
const { isTrim } = window.zcbFun
const { t } = useI18n() // 中英文
const emit = defineEmits(['textareaModel-submit'])
const props = defineProps({
  textareaModelObj: {
    type: Object,
    default: {
      title: '',
      copywriting: '', // 带html文案 'xxxx<span>xxxx</span>xxxxx'
      label: '',
      labelWidth: '40px'
    }
  },
  descriptionFalg: {
    // 审批意见是否必填
    type: Boolean,
    default: true
  }
})
// props.textareaModelObj = {
//       title: '',
//       copywriting: '', // 带html文案 'xxxx<span>xxxx</span>xxxxx'
//       label: t('keys.content'),
//       labelWidth: '40px'
// }
const formData = reactive({
  description: '' // 描述
})
const refForm = ref(null)
const submitForm = () => {
  refForm.value.validate((valid) => {
    if (valid) {
      emit('textareaModel-submit', formData)
      closeModel()
    } else {
      return false
    }
  })
}
const visible = ref(false)
const closeModel = () => {
  formData.description = ''
  visible.value = false
  emit('closeModel')
}
const showModel = () => {
  visible.value = true
  refForm.value ? refForm.value.resetFields() : ''
}
defineExpose({ showModel })
</script>
<style lang="scss" scope>
.dialogAll {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.copywriting {
  width: 100%;
  font-size: 14px;
  line-height: 22px;
  margin: 15px 0;
  span {
    color: var(--el-color-primary);
  }
}
</style>
